<
コンテンツ
説明 バグレポート

向きに基づいて UI を更新する

コンテンツ

状況によっては、 ユーザーがアプリの表示を更新したい場合 画面を縦モードから横モードに回転します。例えば、 アプリは縦向きモードで項目を次々に表示する場合がありますが、 同じアイテムを横向きモードで並べて配置します。

Flutter では、必要に応じてさまざまなレイアウトを構築できます。 与えられたものについてOrientation。 この例では、2 つの列を表示するリストを作成します。 ポートレート モードとランドスケープ モードの 3 列 次の手順:

  1. を建てるGridView2つの列があります。
  2. を使用してくださいOrientationBuilder列の数を変更します。

1. を構築します。GridView2列の場合

まず、作業するアイテムのリストを作成します。 通常のリストを使用するのではなく、 項目をグリッドに表示するリストを作成します。 ここでは、2 つの列を持つグリッドを作成します。

return GridView.count(
  // A list with 2 columns
  crossAxisCount: 2,
  // ...
);

との連携について詳しく知るにはGridViews、 を見てくださいグリッドリストの作成レシピ。

2.OrientationBuilder列数を変更するには

アプリの現在の状態を確認するにはOrientation、 使用OrientationBuilderウィジェット。 のOrientationBuilder電流を計算しますOrientationに 親ウィジェットで利用可能な幅と高さを比較し、 親のサイズが変更されると再構築されます。

の使用Orientation、縦向きに 2 つの列を表示するリストを作成します。 モード、またはランドスケープ モードで 3 列。

body: OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Create a grid with 2 columns in portrait mode,
      // or 3 columns in landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
),

インタラクティブな例

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Orientation Demo';

    return const MaterialApp(
      title: appTitle,
      home: OrientationList(
        title: appTitle,
      ),
    );
  }
}

class OrientationList extends StatelessWidget {
  final String title;

  const OrientationList({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return GridView.count(
            // Create a grid with 2 columns in portrait mode, or 3 columns in
            // landscape mode.
            crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
            // Generate 100 widgets that display their index in the List.
            children: List.generate(100, (index) {
              return Center(
                child: Text(
                  'Item $index',
                  style: Theme.of(context).textTheme.displayLarge,
                ),
              );
            }),
          );
        },
      ),
    );
  }
}